<template>
  <div class="personData">
    <div class="userForm">
    <el-form label-width="100px" :model="user_form" :rules="userFromRules" ref="userFormRef">
      <el-form-item label="昵称:" class="itemClass" prop="username">
          <el-input placeholder="修改后的用户名" v-model="user_form.username"></el-input>
      </el-form-item>
      <el-form-item label="邮箱:" class="itemClass">
        <el-input placeholder="修改后的邮箱" :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="个性签名:" class="itemClass">
      <el-input placeholder="修改后的个性签名" :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="性别" class="itemClass" :disabled="true">
      <el-radio-group>
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
        <el-radio label="阴阳人"></el-radio>
      </el-radio-group>
    </el-form-item>
      <el-form-item label="密码:" class="itemClass" prop="password">
          <el-input placeholder="修改后的密码" v-model="user_form.password" show-password></el-input>
      </el-form-item>
    </el-form-item>
    <el-form-item label="头像:" class="itemClass">
      <el-upload
        
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </el-form-item>
      <el-form-item id="btn">
          <el-button type="primary" icon="el-icon-s-check" @click="userCommit" round>修改</el-button>
          <el-button type="info" icon="el-icon-refresh-right" @click="resetForm" round>重置</el-button>
      </el-form-item>
  </el-form>
</div>
  </div>
</template>

<script>
    export default {
        name: 'personData',
        components: {},
        data() {
            return {
                user_form: {
                    account: '',
                    id: '',
                    username: '',
                    // email: null,
                    // signature: '',
                    // sex: '',
                    password: '',
                },
                userFromRules: {
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }, {
                        min: 5,
                        max: 15,
                        message: '长度在 5 到 15 个字符',
                    }],
                    username: [{
                        required: true,
                        message: '请输入昵称',
                        trigger: 'blur'
                    }, {
                        min: 1,
                        max: 10,
                        message: '长度在 1 到 10 个字符',
                    }]
                },
                imageUrl: ''
            }
        },
        methods: {
            //修改资料提交
            userCommit() {
                this.$http.post('updateUser', this.user_form).then((res) => {
                    if (res.data.code == 200) {
                        this.$message.success('修改成功')
                        this.art_form.content = ''
                        this.$refs.artTag.dynamicTags = []
                    } else {
                        this.$message.error('提交失败')
                    }
                })
            },
            //重置表单
            resetForm() {
                this.$refs.userFormRef.resetFields();
                // this.user_form.email = ''
                this.user_form.account = ''
                    // this.user_form.signature = ''
                    // this.user_form.sex = ''
            },
            //头像上传
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                console.log(res);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
        created() {
            //从vuex中读取用户id
            if (this.$store.state.userData != null) {
                this.user_form.id = this.$store.state.userData.id
                this.user_form.username = this.$store.state.userData.username
                this.user_form.password = this.$store.state.userData.password
                this.user_form.account = this.$store.state.userData.account
                    //储存用户id到session
                window.sessionStorage.setItem('loginId', this.user_form.id)
                window.sessionStorage.setItem('loginAccount', this.user_form.account)
                window.sessionStorage.setItem('loginPassword', this.user_form.password)
            } else {
                this.user_form.account = this.$store.state.loginAccount
                this.user_form.password = this.$store.state.loginPassword
            }
            this.$http.post('userLogin', this.user_form).then((res) => {
                this.user_form = res.data.data
            })
        },
    }
</script>

<style scoped>
    .itemClass {
        margin-bottom: 40px;
    }
    
    .personData {
        position: relative;
        height: 92vh;
    }
    
    .userForm {
        position: absolute;
        width: 60vw;
        bottom: -5%;
        left: 3%;
    }
    
    #btn {
        display: flex;
        margin-top: 40px;
        justify-content: flex-end;
    }
    /* 头像上传样式 */
    
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    
    .avatar-uploader .el-upload:hover .avatar-uploader-icon {
        border-color: #409EFF;
    }
    
    .avatar-uploader-icon {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>